<template>
    <div class="zhukouwozhende">
        <div class="gerenwraps">
            <div class="gerens clearfix">
                <div class="glogo-wrap">
                    <a href="" class="glogo"></a>
                </div>
                <div class="ger-wrap fr clearfix">
                    <ul class="clearfix fl szx">
                        <li><a href="">首页</a></li>
                        <li><a href="">账号设置</a></li>
                        <li><a href="">消息</a></li>
                    </ul>
                    <div class="xiaoinput-wrap fr clearfix">
                        <form action="" class="ssbd">
                            <input type="text" class="xiaoinput fl">
                            <button class="xiaobtns fr">搜索</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="gongnengwrap">
            <div class="gongneng clearfix">
                <div class="gn-l fl">
                    <ul class="gn-ul">
                        <li><a href="#/geren" @click="active1" :class="{active:show==1}">全部功能</a></li>
                        <li><a href="#/geren/zl" @click="active2" :class="{active:show==2}">个人信息</a></li>
                        <li><a href="#/gwche" @click="active3" :class="{active:show==3}">我的购物车</a></li>
                        <li><a href="#/shoucang/bb" @click="active4" :class="{active:show==4}">我的收藏</a></li>
                        <li><a href="#/geren/dzxg" @click="active5" :class="{active:show==5}">收货地址</a></li>
                    </ul>
                </div>
                <div class="gn-z fl">
                    <router-view></router-view>
                </div>
                <!-- <div class="gn-z fl">
                    <div class="gn-zhd">
                        <div class="gn-zhtx clearfix">
                            <div class="dinfo clearfix">
                                <a href="" class="tmtx-wrap">
                                    <img src="../assets/img/ys/mrtx.jpg" alt="" class="mrtx">
                                </a>
                                <div>
                                    <a href="">徽郁</a>
                                </div>
                                <div>
                                    <img src="" alt="">
                                </div>
                            </div>
                            <ul>
                                <li><a href="">收货地址</a></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>
                    </div>
                </div> -->
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            show:'',
            uname:""
        }
    },
    methods:{
        active1(){
            this.show=1;
        },
        active2(){
            this.show=2;
        },
        active3(){
            this.show=3;
        },
        active4(){
            this.show=4;
        },
        active5(){
            this.show=5;
        }
    },
    created(){
        axios.get("/api/").then((data)=>{
            if(data.data){
                this.uname=data.data
            }else{
                this.$router.push("/login")
            }
        })
    }
}
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
}
.ssbd{
    height: 35px;
    width: 325px;
}
.szx{
    height: 80px;
    margin: 0;
    padding: 0;
}
.gn-z{
        margin-left: 10px;
        width: 726px;
        color: #6d6d6d;
    }
    .gerenwraps{
        height: 80px;
        background: #FF4401;
    }
    .gerens{
        width: 1200px;
        margin: 0 auto;
        height: 90px;
    }
    .glogo-wrap{
        text-align: center;
        float: left;
        position: relative;
        overflow: hidden;
        width: 16%;
        height: 80px;
        line-height: 80px;
    }
    .glogo{
        width: 140px;
        height: 36px;
        display: inline-block;
        vertical-align: middle;
        background: url("../assets/img/ys/wdtb.png") no-repeat;
        background-position: left center;
    }
    .ger-wrap{
        width: 82.4%;
    }
    .ger-wrap li{
        line-height: 50px;
        position: relative;
        float: left;
        cursor: pointer;
        z-index: 1;
        height: 50px;
        font: 400 14px/36px tahoma;
    }
    .ger-wrap li a{
        height: 80px;
        line-height: 80px;
        text-decoration: none;
        display: block;
        text-align: center;
        padding: 0 25px;
        color: #fff;
    }
    .xiaoinput-wrap{
        height: 33px;
        margin-top: 25px;
        width: 340px;
    }
    .xiaoinput{
        border: none;
        width: 300px;
        height: 30px;
        background: #fff;
        text-indent: 10px;
    }
    .xiaobtns{
        position: absolute;
        cursor: pointer;
        font-size: 12px;
        color: #666;
        /* background: #f5f5f5; */
        height: 30px;
        width: 71px;
        border: none;
        /* border-left: 1px solid #d9d9d9; */
    }
    .gongneng{
        width: 1190px;
        margin: 0 auto;
        padding-top: 25px;
        margin-bottom: 20px;
    }
    .gn-l{
        width: 110px;
        overflow: hidden;
        font-size: 12px;
        padding-left: 3px;
    }
    .gn-ul{
        /* background-color: rgba(0,0,0,.55); */
    }
    .gn-ul li a{
        display: block;
        overflow: hidden;
        text-decoration: none;
        line-height: 28px;
        color: #000;
        height: 28px;
    }
    .gn-ul li a.active{
        font-size: 15px;
        line-height: 28px;
        margin: 5px 10px 1px 0;
        color: #f40;
    }
    /* .gn-z{
        margin-left: 10px;
        width: 726px;
        color: #6d6d6d;
    }
    .gn-zhd{
        border: 1px solid #e4eaee;
        margin-bottom: 23px;
        font-size: 12px;
        color: #4b4b4b;
        position: relative;
        z-index: 3;
    }
    .gn-zhtx{
        padding: 5px 0;
        position: relative;
        padding-top: 10px;
        font-size:12px;
        font-family: tahoma,arial,'Hiragino Sans GB','Microsoft YaHei',\5b8b\4f53,sans-serif;
        vertical-align: middle;
        color: #546d7e;
        background: #f5f8fa;
        border-bottom: 1px solid #e4eaee;
        line-height: 23px;
    }
    .dinfo{
        float: left;
        width: 39%;
    }
    .tmtx-wrap{
        float: left;
        display: block;
        width: 52px;
        height: 52px;
        margin-right: 13px;
        margin-left: 12px;
        position: relative;
        border: 2px solid #FFF;
        border-radius: 50%;
        overflow: hidden;
    }
    .mrtx{
        border-radius: 50%;
        width: 100%;
        height: 100%;
    } */
</style>
